<template>
   <div class="risk_areas">
       <div class="top">
         <div class="top1">
        <p>那些为守护生命而拼尽全力的人，让我们看到，没有被禁锢的城，只有离不开的爱，再艰难，爱不会离开！在这些平凡人的身上，我们看到了闪光的人性。</p>
        <a href="https://m.thepaper.cn/baijiahao_13241164">详细信息</a>
         </div>
         <div class="top2"></div>
         <div class="top3"></div>
        </div>
         <div id="one" class="two"></div>
         
 
   </div>   

</template>
<script>
import * as echarts from 'echarts';

export default {

  data() {
      return{
        
      } 
  },
  methods:{//初始化图形1
  init_one(){
var chartDom = document.getElementById('one');
var myChart = echarts.init(chartDom);
var option;

option = {
    title: {
        text: '患者总数折线图'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['河北武汉', '大连', '沈阳', '北京', '广州']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2019.12.5', '2019.12.10', '2019.12.15', '2019.12.20', '2019.12.25', '2019.12.30', '2020.1.5']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '河北武汉',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '大连',
            type: 'line',
            stack: '患者总数',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '沈阳',
            type: 'line',
            stack: '患者总数',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '北京',
            type: 'line',
            stack: '患者总数',
            data: [320, 332, 301, 334, 390, 430, 520]
        },
        {
            name: '广州',
            type: 'line',
            stack: '患者总数',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

option && myChart.setOption(option);
  }
   
  },
  //实例创建完成的时候，可以访问我们data里面的值
  created(){
    
  },
  mounted(){
   this.init_one()
  }
}
 
</script>
</script>
<style scoped>

.top{
  height:100px;
  color: aliceblue;
  display: flex;
}
.top .top1{
  flex:3;
font-size: 16px;
background-color: rgb(22, 156, 156);

}
.top .top2{
  flex:1;
  background-image: url(./1.jpg);
  background-size: 100%;
}
.top .top3{
  flex:1;
 background-image: url(./2.jpg);
  background-size: 100%;
}

.two{
  height:550px;
  background-color: rgb(226, 226, 226);
}

</style>
